<template>
  <div
    :class="[
      'base-widget',
      { 'is-selected': isSelected },
      { 'is-dragging': isDragging }
    ]"
    :style="computedStyle"
    @click="handleClick"
    @dblclick="handleDoubleClick"
  >
    <slot />
    
    <!-- 选中状态指示器 -->
    <div v-if="isSelected" class="selection-indicator">
      <div class="resize-handle resize-handle-nw"></div>
      <div class="resize-handle resize-handle-ne"></div>
      <div class="resize-handle resize-handle-sw"></div>
      <div class="resize-handle resize-handle-se"></div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  component: {
    type: Object,
    required: true
  },
  isSelected: {
    type: Boolean,
    default: false
  },
  isDragging: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click', 'doubleClick'])

// 计算样式
const computedStyle = computed(() => {
  const baseStyle = {
    position: 'relative',
    display: 'inline-block',
    ...props.component.style
  }
  
  // 如果是拖拽状态，添加拖拽样式
  if (props.isDragging) {
    baseStyle.opacity = '0.5'
    baseStyle.transform = 'rotate(5deg)'
  }
  
  return baseStyle
})

// 点击事件
const handleClick = (event) => {
  event.stopPropagation()
  emit('click', props.component)
}

// 双击事件
const handleDoubleClick = (event) => {
  event.stopPropagation()
  emit('doubleClick', props.component)
}
</script>

<style scoped>
.base-widget {
  position: relative;
  min-width: 20px;
  min-height: 20px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.base-widget:hover {
  border-color: #409eff;
}

.base-widget.is-selected {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.base-widget.is-dragging {
  cursor: move;
}

.selection-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.resize-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #409eff;
  border: 1px solid #fff;
  border-radius: 50%;
}

.resize-handle-nw {
  top: -4px;
  left: -4px;
  cursor: nw-resize;
}

.resize-handle-ne {
  top: -4px;
  right: -4px;
  cursor: ne-resize;
}

.resize-handle-sw {
  bottom: -4px;
  left: -4px;
  cursor: sw-resize;
}

.resize-handle-se {
  bottom: -4px;
  right: -4px;
  cursor: se-resize;
}
</style> 